<template>
    <div class="withdraw">
        <van-pull-refresh v-model="data.refreshing" @refresh="onRefresh">
            <van-list
                v-model:loading="data.loading"
                :finished="data.finished"
                finished-text="没有更多了"
                @load="onLoad"
                >
                <div class="card-item" v-for="(item, i) in data.list" :key="item.id"
                @click="toRouter('/notice',{id: item.id, current: i})">
                    <!-- <div class="card-item__header flex-align-center justify-between">
                        <span class="title">{{ filters.rewardTypeDesc(item.rewardType) }}</span>
                        <span class="amount text-E7451B"> ¥{{ filters.formater(item.amount) }}</span>
                    </div> -->
                    <div class="card-item__cell">{{item.title}}</div>
                    <div class="card-item__cell">{{filters.timeFormat(item.createTime)}}</div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue"
import { listNotice } from "@/config/api"
import { useRouter } from 'vue-router'
const router = useRouter()
const toRouter = (path, query = {})=>{
    let i = query.current+1;
    query.current = i%data.value.pageSize===0?parseInt(i/data.value.pageSize):(parseInt(i/data.value.pageSize)+1)
    router.push({path, query})
}

import dayjs from 'dayjs'

const filters = ref({
    timeFormat: function(val){
        return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
})

const data = ref({
    loading: false,
    finished: false,
    refreshing: false,
    list: [],
    pageNo: 1,
    pageSize: 10
})

onBeforeMount(() => {
    // MyRewardList({}).then(resp=>{
    //     data.value = resp
    //     console.log(resp,'MyRewardList');
    // })
})
const onLoad = ()=>{
    const {pageNo,pageSize} = data.value
    data.value.loading = true;
    listNotice({current:pageNo,pageSize,type:'cn'}).then(resp=>{
        data.value.list = data.value.list.concat(resp.records)
        if(resp.total > data.value.list.length){
            data.value.pageNo++
        }else if(resp.total == data.value.list.length){
            data.value.finished = true
        }
        data.value.loading = false
        data.value.refreshing = false
    })
    .catch(()=>{
        data.value.loading = false
    })
    // 数据全部加载完成
        // if (list.value.length >= 40) {
        //   finished.value = true;
        // }
}

const onRefresh = () => {
    // 清空列表数据
    data.value.finished = false;

    data.value.pageNo = 1
    data.value.pageNo = 10
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    data.value.loading = true;
    onLoad();
};
</script>

<style lang="less" scoped>
.text-E7451B{
    color: #E7451B !important;
}
.text-333{
    color: #333333;
}
.mt-30{
    margin-top: 0.4rem;
}
.status2{
    color: #FF4D4F;
}
.status1{
    color: var(--color-primary);
}
.withdraw{
    min-height: 100vh;
    background: #F0F3F8;
    padding-top: .33rem;
    .card-item{
        margin: 0   0.4rem;
        padding: 0.4rem 0.4rem;
        // min-height: 3.79rem;
        background: #FFFFFF;
        // border-radius: 0.16rem;
        border-bottom: .01rem #EBEEF5 solid;
        &__header{
            line-height: 1.52rem;
            border-bottom: 0.01rem solid #EEEFF3;
            .amount,.title{
                font-size: 0.48rem;
                font-family: DIN-Medium, DIN;
                font-weight: 500;
                color: #101D37;
            }
        }
        &__cell{
            font-size: 0.4rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 0.56rem;
            display: flex;
            justify-content: space-between;
            margin-top: 0.4rem;
            &:first-of-type{
                margin-top: 0;
            }
        }
    }
}
</style>
